<template>
  <div class="rightArea">
    <div class="rightTop">我的会员</div>

    <div class="rightBottom">
      <!-- 用户信息 -->
      <div class="user_info">
        <el-avatar
          :size="100"
          shape="circle"
          :src="avatar"
          fit="fill"
        ></el-avatar>
        <div class="name-info">
          <div class="user_txt">
            <div class="name">独奏</div>
            <div class="state">您还不是会员</div>
          </div>
        </div>
      </div>
      <!-- saving -->
      <div class="saving">开通会员平均每年可省: ￥9500</div>
      <!-- 会员购买 price_area -->
      <div class="price_area">
        <!-- 季度 -->
        <div class="price-container-box">
          <p>季度会员</p>
          <div class="price">
            <span>￥ </span>
            <span style="font-size: 30px">98</span>
            <span>/季</span>
          </div>
          <p>合计￥98(青少年专属)</p>
        </div>
        <!-- 1年 -->
        <div class="price-container-box">
          <p>1年会员</p>
          <div class="price">
            <span>￥ </span>
            <span style="font-size: 30px">268</span>
            <span>/年</span>
          </div>
          <p>合计￥268</p>
        </div>
        <!-- 3年 -->
        <div class="price-container-box">
          <p>3会员</p>
          <div class="price">
            <span>￥ </span>
            <span style="font-size: 30px">196</span>
            <span>/季</span>
          </div>
          <p>合计￥588(省￥216)</p>
        </div>
      </div>
      <!-- 立即开通 -->
      <button class="payButton">立即以588元开通</button>
      <!-- agreement会员服务协议 -->
      <div class="agreement">开通即视为同意 <span>《会员服务协议》</span></div>
      <div class="line"></div>

      <!-- 会员专属权益 -->
      <div class="member_benefits">
        <div class="title">会员专属权益</div>
        <!-- 会员专区 -->
        <ul class="member_section">
          <li class="section_item">
            <img class="icon" src="@/assets/center/free.png" />
            <p class="text"><span class="text-num">742</span>个会员专区</p>
            <p>课程免费学习</p>
          </li>
          <li class="section_item">
            <img class="icon" src="@/assets/center/free.png" />
            <p class="text"><span class="text-num">742</span>个会员专区</p>
            <p>课程免费学习</p>
          </li>
          <li class="section_item">
            <img class="icon" src="@/assets/center/free.png" />
            <p class="text"><span class="text-num">742</span>个会员专区</p>
            <p>课程免费学习</p>
          </li>
          <li class="section_item">
            <img class="icon" src="@/assets/center/free.png" />
            <p class="text"><span class="text-num">742</span>个会员专区</p>
            <p>课程免费学习</p>
          </li>
          <li class="section_item">
            <img class="icon" src="@/assets/center/free.png" />
            <p class="text"><span class="text-num">742</span>个会员专区</p>
            <p>课程免费学习</p>
          </li>
          <li class="section_item" style="margin-right: 0">
            <img class="icon" src="@/assets/center/free.png" />
            <p class="text"><span class="text-num">742</span>个会员专区</p>
            <p>课程免费学习</p>
          </li>
          <li class="section_item">
            <img class="icon" src="@/assets/center/free.png" />
            <p class="text"><span class="text-num">742</span>个会员专区</p>
            <p>课程免费学习</p>
          </li>
          <li class="section_item">
            <img class="icon" src="@/assets/center/free.png" />
            <p class="text"><span class="text-num">742</span>个会员专区</p>
            <p>课程免费学习</p>
          </li>
          <li class="section_item">
            <img class="icon" src="@/assets/center/free.png" />
            <p class="text"><span class="text-num">742</span>个会员专区</p>
            <p>课程免费学习</p>
          </li>
          <li class="section_item">
            <img class="icon" src="@/assets/center/free.png" />
            <p class="text"><span class="text-num">742</span>个会员专区</p>
            <p>课程免费学习</p>
          </li>
          <li class="section_item">
            <img class="icon" src="@/assets/center/free.png" />
            <p class="text"><span class="text-num">742</span>个会员专区</p>
            <p>课程免费学习</p>
          </li>
          <li class="section_item" style="margin-right: 0; margin-bottom: 30px">
            <img class="icon" src="@/assets/center/free.png" />
            <p class="text"><span class="text-num">742</span>个会员专区</p>
            <p>课程免费学习</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import avatar from "@/assets/09.jpg";
export default {
  data() {
    return {
      avatar: avatar,
    };
  },
};
</script>

<script setup lang="ts"></script>

<style scoped lang="less">
//右侧
.rightArea {
  width: 1020px;
  height: 875px;
  margin-left: 10px;

  .rightTop {
    width: 1020px;
    height: 72px;
    line-height: 72px;
    color: #111;
    font-size: 14px;
    padding-left: 45px;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 10px;
  }

  .rightBottom {
    width: 100%;
    height: 450px;
    background-color: #fff;
    padding-top: 30px;
    .user_info {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 35px;

      .user_txt {
        margin-left: 15px;
        .name {
          font-size: 20px;
          cursor: pointer;
        }
        .state {
          font-size: 14px;
          color: #f93684;
        }
      }
    }
    // saving
    .saving {
      text-align: center;
      margin-top: 20px;
    }

    // 会员购买
    .price_area {
      display: flex;
      justify-content: center;
      .price-container-box {
        width: 250px;
        display: flex;
        margin-right: 24px;
        margin-top: 50px;
        flex-direction: column;
        align-items: center;
        border: 1px solid #b1b5c1;
        border-radius: 15px;
      }
    }
    // 立即开通
    .payButton {
      display: flex;
      justify-content: center;
      width: 330px;
      height: 56px;
      line-height: 56px;
      font-size: 16px;
      border: none;
      margin: 30px auto 12px;
      border-radius: 10px;
      background: linear-gradient(-56deg, #ff4683, #ff638f);
      color: #fff;
      cursor: pointer;
    }
    // 会员服务协议
    .agreement {
      width: 100%;
      font-size: 14px;
      text-align: center;
      span {
        color: #f93684;
        margin-left: 5px;
      }
    }
    // line
    .line {
      width: 100%;
      height: 1px;
      background-color: #e3e3e3;
      margin-top: 30px;
    }
  }
  // 会员专区专属权益
  .member_benefits {
    width: 1020px;
    height: 500px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e3e3e3;
    background-color: #fff;
    .title {
      width: 960px;
      height: 23px;
      padding-top: 32px;
      color: #111;
      font-weight: 700;
      font-size: 20px;
      margin-left: 10px;
    }
    // 会员专区
    .member_section {
      width: 941px;
      height: 318px;
      margin-top: 20px;
      padding-left: 19px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;

      .section_item {
        width: 127px;
        height: 129px;
        border: 1px solid #e3e3e3;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 30px 30px 0;
        border-radius: 15px;
        box-sizing: border-box;
        .icon {
          width: 46px;
          height: 42px;
        }
        .text {
          font-size: 14px;
          margin-top: 10px;
          .text-num {
            color: #f93684;
          }
        }
        p {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
